<template>
	<view>
		<st-mc-framework navTitle="古越电源注塑MES" @changeLevel="changeLevel">
			<template #content>
				<view class="contentBox">
					<view class="view_left">
						<view class="view_cell"><u-icon name="list" size="28"></u-icon>
							当前生产计划
						</view>
						<view class="view_content">
							<!-- 				<u-row justify="space-between">
								<u-col span="4">
									</text>计划单号</text>
								</u-col>
								<u-col span="8">
									</text>{{HomeWoOrderList.GDBillNo}}</text>
								</u-col>
							</u-row> -->
							<view><text>计划单号</text> <text>{{HomeWoOrderList.GDBillNo}}</text> </view>
							<view><text>计划数量</text> <text>{{HomeWoOrderList.FPlanQty}}</text></view>
							<view><text>完成数量</text> <text>{{HomeWoOrderList.WCQty}}</text></view>
							<!-- 			<u-row justify="space-between">
								<u-col span="4">
								</text>	产品名称</text>
								</u-col>
								<u-col span="8">
								</text>	{{HomeWoOrderList.ProductName}}</text>
								</u-col>
							</u-row> -->
							<view><text>产品名称</text> <text>{{HomeWoOrderList.ProductName}}</text></view>
						</view>
						<view class="view_cell"><u-icon name="file-text" size="28"></u-icon>
							报工信息
						</view>
						<view class="uni_table">
							<uni-table border stripe emptyText="暂无更多数据" class="uni-table">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th width='60' align="center" style='font-size: 9rpx;'>生产人员</uni-th>
									<uni-th width='60' align="center" style='font-size: 9rpx;'>报工数量</uni-th>
									<uni-th width='60' align="center" style='font-size: 9rpx;'>生产时间</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr>
									<uni-td align="center" style='font-size: 9rpx;'>2020</uni-td>
									<uni-td align="center" style='font-size: 9rpx;'>Jeson</uni-td>
									<uni-td align="center" style='font-size: 9rpx;'>10-10</uni-td>
								</uni-tr>

							</uni-table>
						</view>

					</view>
					<view class="view_right">
						<view class="right_top">
							<view class="right_top_number">
								<text>目标产量</text>
								<view>
									<image src="../css/number/shuzi6.png"></image>
									<image src="../css/number/shuzi0.png"></image>
									<image src="../css/number/shuzi0.png"></image>
								</view>
							</view>
							<view class="right_top_number">
								<text>实际产量</text>
								<view>
									<image src="../css/number/shuzi5.png"></image>
									<image src="../css/number/shuzi7.png"></image>
									<image src="../css/number/shuzi9.png"></image>
								</view>
							</view>
							<view class="right_top_number">
								<text>进度差异</text>
								<view>
									<image src="../css/number/shuzi3.png"></image>
									<image src="../css/number/shuzi4.png"></image>
								</view>
							</view>
							<view class="right_top_number">
								<text>不良数量</text>
								<view>
									<image src="../css/number/shuzi1.png"></image>
									<image src="../css/number/shuzi2.png"></image>
									<image src="../css/number/shuzi8.png"></image>
								</view>
							</view>
						</view>

						<view class="right_center">
							<view class="right_center_charts1">
								<qiun-data-charts type="gauge" :opts="opts1" :chartData="chartData1" />
							</view>
							<view class="right_center_charts2">
								<qiun-data-charts type="line" :opts="opts2" :chartData="chartData2" />
							</view>
						</view>

						<view class="right_buttom">
							<view class="right_buttom_left">
								<view class="buttom_left_title">标准节拍 50s</view>
								<u-line-progress height="20" :percentage="50" activeColor="#2196f3"></u-line-progress>
								<view class="buttom_left_title">实际节拍 47s</view>
								<u-line-progress height="20" :percentage="47" activeColor="#3ce012"></u-line-progress>
							</view>
							<view class="right_buttom_right">
								<u-grid :border="false">
									<u-grid-item class="grid-item" v-for="(baseListItem,baseListIndex) in baseList"
										:key="baseListIndex">
										<text class="grid-name">{{baseListItem.name}}</text>
										<text class="grid-text grid-name">{{baseListItem.title}}</text>
									</u-grid-item>
								</u-grid>
							</view>
						</view>

						<view class="right_buttom2">
							<view class="grid-container">
								<view class="grid_item y-f" v-for="item in moduleData_show" :key="item.APPFunID"
									@click="itemClick(item)">
									<!-- <view style="margin-top: 10px;"> -->
									<text>{{item.APFunName}}</text>
									<!-- </view> -->
								</view>
							</view>

						</view>
					</view>

				</view>
			</template>
		</st-mc-framework>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					WoOrderID: null,
					EquipmentID: 0,
				},
				moduleData_show: [],
				chartData1: {},
				chartData2: {},
				opts1: {
					// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					// 	"#ea7ccc"
					// ],
					padding: [15, 10, 0, 15],
					title: {
						name: "60",
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 50
					},
					subtitle: {
						name: "",
						fontSize: 15,
						color: "#666666",
						offsetY: -50
					},
					extra: {
						gauge: {
							width: 10,
							type: "default",
							radius: '30%',
							axisLine: { // 坐标轴线
								lineStyle: { // 属性lineStyle控制线条样式
									color: [
										[0.2, 'lime'],
										[0.8, '#2fc25b'],
										[1, '#f04864']
									],
									// color: [
									// 	[0.09, 'lime'],
									// 	[0.82, '#1e90ff'],
									// 	[1, '#ff4500']
									// ],

									// categories: [{
									// 	"value": 0.2,
									// 	"color": "#1890ff"
									// }, {
									// 	"value": 0.8,
									// 	"color": "#2fc25b"
									// }, {
									// 	"value": 1,
									// 	"color": "#f04864"
									// }],
									width: 2,
									shadowColor: '#000', //默认透明
									shadowBlur: 0,
								}
							},
							splitLine: {
								// color: '#000',
								// color: [{
								// 	"value": 0.2,
								// 	"color": "#1890ff"
								// }, {
								// 	"value": 0.8,
								// 	"color": "#2fc25b"
								// }, {
								// 	"value": 1,
								// 	"color": "#f04864"
								// }],
								color: "#e7e7e7", //去掉分割线

							},
							pointer: {
								width: 5, //指针的宽度
								length: "60%", //指针长度，按照半圆半径的百分比
								shadowBlur: 5
							},
						},

						// axisLabel: {
						// 	textStyle: { // 属性lineStyle控制线条样式
						// 		color: '#000',
						// 		fontSize: 9, //改变仪表盘内刻度数字的大小
						// 		shadowColor: '#000', //默认透明

						// 	}
						// }
					}
				},
				opts2: {
					// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					// 	"#ea7ccc"
					// ],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					// legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					// extra: {
					// 	line: {
					// 		type: "straight",
					// 		width: 2,
					// 		activeType: "hollow"
					// 	}
					// }
				},
				baseList: [{
						name: '铸造压力：70.40',
						title: '50.00~100.00'
					},
					{
						name: '料头厚：22.40',
						title: '13.00~29.00'
					},
					{
						name: '增压启动时间：57.00',
						title: '50.00~100.00'
					},
					{
						name: '高速速度：2.60',
						title: '50.00~100.00'
					},
					{
						name: '高速速度：2.60',
						title: '50.00~100.00'
					},
					{
						name: '高速速度：2.60',
						title: '50.00~100.00'
					},
					{
						name: '关模力：--',
						title: ''
					},
				],
				new_list: [],
				HomeWoOrderList: {},
				// HomeWoOrderList: [],
				HomeDailyOutputList: {},
				// HomeDailyOutputList: [],
			};
		},

		onReady() {
			this.getServerData();
		},
		onLoad(onlod) {
			this.baseFormData.EquipmentID = this
				.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentID

			this.moduleData_show = this.$store.state.GuyueModule.ModuleData.slice(1)
			this.HomeWoOrder()
			this.HomeDailyOutput()

		},
		onBackPress(options) { // 监听页面返回
			if (options.from == 'navigateBack') { // 通过点击路由返回
				return false;
			} else if (options.from == 'backbutton') { // 通过外置返回
				return true;
			}
		},
		mounted() {
			let that = this;
			uni.$on('changeLevel', function(data, row) {
				that.changeLevel(data, row)
			})
		},


		methods: {
			HomeWoOrder() {
				var that = this
				that.Request.request('getHomeWoOrder', {
					EquipmentID: that.baseFormData.EquipmentID
				}, (ret) => {
					console.log(JSON.stringify(ret));
					if (ret.status == 200 && ret.data.ds.length > 0) {
						that.HomeWoOrderList = ret.data.ds[0]
						console.log(that.HomeWoOrderList);
						console.log(that.HomeWoOrderList.WoOrderID);
						that.Request.request('getHomeWoOrder', {
							WoOrderID: that.HomeWoOrderList.WoOrderID
						}, (ret) => {
							if (ret.status == 200) {
								console.log(ret);
								that.HomeDailyOutputList = ret.data.ds[0]
							}
						})
					}
				})
			},
			HomeDailyOutput() {
				var that = this
				// that.Request.request('getHomeDailyOutput', this.FormData, (ret) => {
				// 	if (ret.status == 200) {
				// 		that.$refs.paging.complete(ret.data.ds);
				// 		that.$forceUpdate()
				// 	}
				// })
			},

			changeLevel(data, row) {

				if (data.length == 2) { // 顶级 
					this.moduleData_show = this.$store.state.GuyueModule.ModuleData.slice(1)
				} else if (data.length == 1) {
					this.moduleData_show = this.$store.state.GuyueModule.ModuleData.slice(1)

				} else {
					let backData = data.filter(item => {
						return item.APPFunID == row.APPFunID
					});
					this.moduleData_show = backData[0]['nood'][0]['pages'];

				}
				let routes = getCurrentPages(); //当前页面栈
				let backIndex = routes.length - row.length; // 计算返回页面栈数
				if (backIndex != 0) {
					uni.navigateBack({
						delta: backIndex
					})
				}

			},
			itemClick(data) { // 点击模块数据
				var UrlShow = false
				let nood = this.moduleData_show.filter(item => {
					return item.APPFunID == data.APPFunID
				});
				let routes = getCurrentPages();
				let obj = {
					length: routes.length + 1,
					Name: data.APFunName,
					APPFunID: data.APPFunID,
					nood: nood
				}
				if (!data.pages.length) { // 判断是否存在子数据
					UrlShow = true
				}
				this.moduleData_show = this.$utils.deepClone(data['pages']);
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				newData.push(obj);

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: newData
				})
				if (UrlShow) {
					uni.navigateTo({
						url: data.AP_Link,
						animationType: 'slide-in-right',
						animationDuration: 300
					});

				} else {
					uni.navigateTo({
						url: `/st_mes_zs/index/index?data=${JSON.stringify(data.APPFunID)}`,
						animationType: 'slide-in-right',
						animationDuration: 300
					});
				}

			},

			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res1 = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: 0.1
						}]
					};
					let res2 = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20]
							},
							// {
							// 	name: "成交量B",
							// 	data: [70, 40, 65, 100, 44, 68]
							// },
							// {
							// 	name: "成交量C",
							// 	data: [100, 80, 95, 150, 112, 132]
							// }
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res1));

					this.chartData2 = JSON.parse(JSON.stringify(res2));


				}, 500);
			},
		}
	}
</script>

<style lang="scss" >
	@import "../css/index.css";

	.contentBox {
		width: 100%;
		height: 100%;
		display: flex;
		padding: 0;
		overflow: auto;

		.view_left {
			width: 30%;
			height: 100vh;
			border-right: 1rpx solid #6f6851;
			background-color: #fff;

			.view_cell {
				display: flex;
				align-items: center;
				font-size: 11rpx;
				height: 5vh;
				line-height: 5vh;

				::v-deep.u-icon__icon {
					font-size: 20rpx !important;
				}

			}

			.view_content {
				background-color: #fff;
				width: 100%;
				height: 20vh;
				font-size: 11rpx;

				view {
					box-sizing: border-box;
					padding: 0 2%;

					text {
						color: #909399;
					}

					text:first-child {
						display: inline-block;
						width: 25%;

					}
				}
			}

			.uni_table {
				width: 100%;
				height: 70vh;
				overflow: auto;



			}


		}

		.view_right {
			width: 70%;
			height: 100vh;
			background-color: #fff;

			.right_top {
				width: 100%;
				display: flex;
				height: 12vh;


				.right_top_number {
					display: flex;
					flex-direction: column;
					width: 25%;
					justify-content: space-around;
					text-align: center;
					height: 100%;
					font-size: 11rpx;

					view {
						image {
							width: 15rpx;
							height: 15rpx;
						}
					}
				}
			}

			.right_center {
				width: 100%;
				height: 45vh;
				display: flex;
				align-items: center;

				.right_center_charts1 {
					width: 40%;
					height: 100%;
				}

				.right_center_charts2 {
					width: 60%;
					height: 100%;

				}
			}

			.right_buttom {
				width: 100%;
				height: 30%;
				font-size: 11rpx;
				display: flex;


				.right_buttom_left {
					width: 30%;
					height: 100%;

					padding-left: 10rpx;

					.buttom_left_title {
						margin: 5rpx 0;
					}
				}

				.right_buttom_right {
					width: 70%;
					height: 100%;

					.u-grid {
						height: 100%;

						.grid-item {

							height: 33%;
							font-weight: 600;
							font-size: 11rpx;

							.grid-text {
								// padding: 1.5rpx;
								color: green;
							}

							.grid-name {
								padding: 1.5rpx;

							}
						}

					}

				}
			}

			.right_buttom2 {
				height: 13%;
				width: 100%;
				overflow: auto;
				padding: 1% 2%;
				font-size: 11rpx;

				.grid-container {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-gap: 14rpx;
				}

				.grid_item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 30rpx;
					background-color: #50cfce;
					color: #fff;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>